web三维gis引擎cesium的学习笔记(包含视频融合和动态纹理)

本文是关于web三维GIS引擎Cesium的学习笔记,重点关注Cesium Viewer、坐标系、视频融合和动态纹理。文章介绍了Cesium的各种坐标系、Entity API和Primitives API的使用,包括几何体、自定义材质、点选、相机操作等,并展示了如何在3DTile模型上融合视频和动态更新纹理的方法。此外,还提到了Cesium的渲染状态设置及深度测试等高级特性。
摘要由CSDN通过智能技术生成

web三维gis引擎cesium的学习笔记(包含视频融合和动态纹理)

Cesium.Viewer

  • Viewer对象的部分参数及函数
Viewer
	zoomTo()
	globe
	camera
		flyToBoundingSphere()
	entities
		add()
	canvas
		setAttribute()
		focus()
	scene
		camera
		screenSpaceCameraController
		primitives	
			add()

坐标系

  • 在cesium中主要有三种坐标系,分别为平面坐标系,wgs84坐标系和笛卡尔空间直角坐标系(经过旋转后我们可以发现笛卡尔空间直角坐标系其实就是右手坐标系)
  • 平面坐标系:平面坐标系也就是平面直角坐标系,是一个二维笛卡尔坐标系,与Cartesian3相比少了一个z的分量,new Cesium.Cartesian2(x, y)。Cartesian2经常用来描述屏幕坐标系,比如鼠标在电脑屏幕上的点击位置,返回的就是Cartesian2,返回了鼠标点击位置的xy像素点分量
  • 在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

位置方向

  • 以下四种是cesium用来描述物体位置及方向的主要方式

  • Cartesian3:3D笛卡尔坐标–使用地球固定框架(ECEF)时,它相对于地球中心以米为单位

  • Cartographic:由距WGS84椭球面的经度,纬度(以弧度表示)和高度定义的位置

  • Quaternion(四元数):表示为4D坐标的3D旋转

  • HeadingPitchRoll:一个用heading、pitch、roll三个方向的旋转角度来表达的旋转信息(以弧度为单位),以下为英文原版,说的不是很好理解

    Cartographic : a position defined by longitude, latitude (in radians) and height from the WGS84 ellipsoid surface
    HeadingPitchRoll : A rotation (in radians) about the local axes in the East-North-Up frame. Heading is the rotation about the negative z axis. Pitch is the rotation about the negative y axis. Roll is the rotation about the positive x axis

  • 三维空间的右手笛卡尔坐标如下图,这张图与英文原版描述的轴方向不太对应,但是帮助我们理解heading,pitch,roll这三个名词确是非常有用的,熟悉摄像机的朋友应该比较了解heading和pitch,由于摄像机一般都是正放的(几乎没有人把摄像机倒立放,因为这样画面也倒立了),因此不会需要roll这第三个参数,而飞机由于可以在空中进行翻转(可以理解为倒立),于是才需要roll来描述这种倒立状态
    在这里插入图片描述

  • 以下是官方示例代码

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
   
    destination : initialPosition,
    orientation : {
   
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
   
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

官方api文档及示例

Entity API

  • Creating Entities | cesium.com
  • 在cesium中提供了两种api,一种是Primitive API,它是属于比较低级别的,适合那些精通图像学的开发者,另一个是Entity API,它是一个比较高级别的,已经封装了常用的图形(如点,标签,圆形,椭圆,折线,立方体,矩形,柱体,墙,模型等),使用起来会比较方便,用户一般只是设置下数据就可以了
var entity = viewer.entities.add({
   //entities是EntityCollection类型,可以存放Entity类型,另外还有remove,removeAll等方法 
	id:"uniqueId",//定义一个id,可选,之后可以通过viewer.entities.getById('uniqueId')获取
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),//指定位置
  ellipse : {
    //entity api支持的几何体,有model,point,label等等
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5) //设置外观材质,可以是颜色(ColorMaterialProperty),也可以是图片(ImageMaterialProperty),图片的话直接写图片地址即可
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse;
ellipse.material = '/docs/tutorials/creating-entities/images/cats.jpg';//修改材质为图片,实际上创建了ImageMaterialProperty

//棋盘材质
ellipse.material = new Cesium.CheckerboardMaterialProperty({
   
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});
  • entity api支持创建颜色(ColorMaterialProperty),图像(ImageMaterialProperty),棋盘(CheckerboardMaterialProperty),条纹(StripeMaterialProperty),网格(GridMaterialProperty)这几种材质
  • 除了折线外每个形状都有是否填充和轮廓线的设置,如
ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;
  • 折线可以通过PolylineOutlineMaterialProperty和PolylineGlowMaterialProperty来设置轮廓和发光
  • 多边形(polyg
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值